<template>
  <div id="shop">
    <shop-nav-bar />
    <shop-introduction :shop-introduction="shopIntroduction" />
    <shop-tab-control />
    <shop-main :restaurant-id="restaurantId" />
    <shop-cart :restaurant-id="restaurantId" />
    <router-view :shop-detail="shopDetail" />
  </div>
</template>

<script>
import ShopNavBar from "./childComps/ShopNavBar";
import ShopIntroduction from "./childComps/ShopIntroduction";
import ShopTabControl from "./childComps/ShopTabControl";
import ShopMain from "./childComps/ShopMain";
import ShopCart from "./childComps/ShopCart";

import { SET_SHOP_INFO, SET_SHOP_COMMODITY_LIST } from "store/mutations.type";

import {
  getShopInfo,
  Introduction,
  shopDetail,
  getShopMenu,
} from "network/shop";
export default {
  name: "Shop",
  data() {
    return {
      latitude: "",
      longitude: "",
      shopIntroduction: {},
      shopDetail: {},
      shopInfo: {},
      restaurantId: 0,
    };
  },
  inject: ["reload"],
  created() {
    this.reload();
    const geohash = this.$route.query.geohash
      ? this.$route.query.geohash.split(",")
      : "";
    this.latitude = geohash[0];
    this.longitude = geohash[1];
    const config = {
      id: this.$route.query.id,
      latitude: this.latitude,
      longitude: this.longitude,
      extrasParams: [
        "activities",
        "album",
        "license",
        "identification",
        "statistics",
      ],
    };
    this.getShopInfo(config);
  },
  destroyed() {
    this.$bus.$emit('shopIntroductionName',this.shopIntroduction)
  },
  methods: {
    getShopInfo(args) {
      getShopInfo(args).then((res) => {
        this.$bus.$emit("handleCartData", {
          amount: res.float_minimum_order_amount,
          fee: res.float_delivery_fee,
        });
        this.restaurantId = res.id;
        this.$store.commit(SET_SHOP_INFO, res);

        this.shopIntroduction = new Introduction({
          img: res.image_path,
          name: res.name,
          tips: res.float_delivery_fee,
          notice: res.promotion_info,
          activities: res.activities,
        });

        this.shopDetail = new shopDetail({
          supports: res.supports,
          activities: res.activities,
          name: res.name,
          status: res.status,
          address: res.address,
          openingHuors: res.opening_hours ? res.opening_hours[0] : "",
        });

        this.getShopMenu(this.restaurantId);
      });
    },

    getShopMenu(restaurantId) {
      getShopMenu(restaurantId).then((res) => {
        this.$store.commit(SET_SHOP_COMMODITY_LIST, res);
      });
    },
  },
  components: {
    ShopNavBar,
    ShopIntroduction,
    ShopTabControl,
    ShopMain,
    ShopCart,
  },
};
</script>
<style lang="less" scoped>
#shop {
  position: relative;
  height: 100vh;
  background-color: #fff;
  overflow: hidden;
  z-index: 1;
}
</style>